<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>排球队管理系统</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        /* 轮播图样式 */
        .carousel-container {
            position: relative;
            width: 100%;
            height: 400px;
            overflow: hidden;
            border-radius: 12px;
            margin-bottom: 40px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        .carousel-slides {
            display: flex;
            width: 500%;
            height: 100%;
            transition: transform 0.8s ease-in-out;
        }

        .carousel-slide {
            width: 20%;
            height: 100%;
            position: relative;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
        }

        .carousel-slide:nth-child(2) {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }

        .carousel-slide:nth-child(3) {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }

        .carousel-slide:nth-child(4) {
            background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
        }

        .carousel-slide:nth-child(5) {
            background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
        }

        .carousel-content {
            text-align: center;
            max-width: 600px;
            padding: 0 40px;
        }

        .carousel-content h2 {
            font-size: 2.5em;
            margin-bottom: 20px;
            font-weight: 700;
        }

        .carousel-content p {
            font-size: 1.2em;
            opacity: 0.9;
            line-height: 1.6;
        }

        .carousel-nav {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 10px;
        }

        .carousel-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .carousel-dot.active {
            background: white;
            transform: scale(1.2);
        }

        .carousel-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.2);
            color: white;
            border: none;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            font-size: 1.2em;
            cursor: pointer;
            transition: all 0.3s ease;
            backdrop-filter: blur(10px);
        }

        .carousel-arrow:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-50%) scale(1.1);
        }

        .carousel-arrow.prev {
            left: 20px;
        }

        .carousel-arrow.next {
            right: 20px;
        }

        /* 快速链接样式 */
        .quick-links {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 25px;
            margin-bottom: 40px;
        }

        .quick-link-card {
            background: white;
            border-radius: 12px;
            padding: 30px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
            cursor: pointer;
            text-decoration: none;
            color: inherit;
        }

        .quick-link-card:hover {
            transform: translateY(-5px);
            text-decoration: none;
            color: inherit;
        }

        .quick-link-icon {
            font-size: 3rem;
            margin-bottom: 20px;
            color: #667eea;
        }

        .quick-link-title {
            font-size: 1.3rem;
            color: #333;
            margin-bottom: 15px;
            font-weight: bold;
        }

        .quick-link-description {
            color: #666;
            line-height: 1.6;
            margin-bottom: 20px;
        }

        /* 最新动态样式 */
        .news-section {
            margin-bottom: 40px;
        }

        .news-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
        }

        .news-header h3 {
            font-size: 1.8em;
            color: #2d3748;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .news-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 25px;
        }

        .news-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            cursor: pointer;
        }

        .news-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }

        .news-card-image {
            width: 100%;
            height: 180px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 3em;
            opacity: 0.8;
        }

        .news-card:nth-child(even) .news-card-image {
            background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        }

        .news-card:nth-child(3n) .news-card-image {
            background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
        }

        .news-card-content {
            padding: 20px;
        }

        .news-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
            color: #718096;
            font-size: 0.9em;
        }

        .news-category {
            background: #e2e8f0;
            color: #4a5568;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 0.8em;
            font-weight: 500;
        }

        .news-title {
            font-size: 1.2em;
            color: #2d3748;
            font-weight: 600;
            margin-bottom: 10px;
            line-height: 1.4;
        }

        .news-excerpt {
            color: #718096;
            line-height: 1.6;
            font-size: 0.95em;
        }

        /* 待办事项样式 */
        .todo-section {
            margin-bottom: 40px;
        }
        
        .todo-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 25px;
            padding: 0 5px;
        }
        
        .todo-header h3 {
            font-size: 1.8em;
            color: #2d3748;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 0;
        }
        
        .todo-header h3 i {
            color: #667eea;
        }
        
        .todo-stats {
            display: flex;
            align-items: center;
            gap: 5px;
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.9em;
            font-weight: 500;
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
        }
        
        .todo-count {
            font-size: 1.2em;
            font-weight: 700;
        }
        
        .todo-container {
            display: grid;
            gap: 15px;
            margin-bottom: 25px;
        }
        
        .todo-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            display: flex;
            align-items: center;
            gap: 15px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
            transition: all 0.3s ease;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            border-left: 4px solid;
        }
        
        .todo-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, transparent 0%, rgba(102, 126, 234, 0.02) 100%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .todo-card:hover::before {
            opacity: 1;
        }
        
        .todo-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
        }
        
        .todo-card.urgent {
            border-left-color: #f56565;
            animation: urgentPulse 2s infinite;
        }
        
        .todo-card.normal {
            border-left-color: #4299e1;
        }
        
        .todo-card.low {
            border-left-color: #48bb78;
        }
        
        @keyframes urgentPulse {
            0%, 100% {
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
            }
            50% {
                box-shadow: 0 2px 10px rgba(245, 101, 101, 0.3);
            }
        }
        
        .todo-icon {
            width: 50px;
            height: 50px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3em;
            color: white;
            flex-shrink: 0;
        }
        
        .todo-card.urgent .todo-icon {
            background: linear-gradient(135deg, #f56565, #e53e3e);
        }
        
        .todo-card.normal .todo-icon {
            background: linear-gradient(135deg, #4299e1, #3182ce);
        }
        
        .todo-card.low .todo-icon {
            background: linear-gradient(135deg, #48bb78, #38a169);
        }
        
        .todo-content {
            flex: 1;
        }
        
        .todo-title {
            font-size: 1.1em;
            font-weight: 600;
            color: #2d3748;
            margin-bottom: 5px;
        }
        
        .todo-desc {
            font-size: 0.9em;
            color: #718096;
            margin-bottom: 8px;
            line-height: 1.4;
        }
        
        .todo-time {
            font-size: 0.8em;
            color: #a0aec0;
            font-weight: 500;
        }
        
        .todo-badge {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 0.9em;
            font-weight: 600;
            flex-shrink: 0;
        }
        
        .urgent-badge {
            background: linear-gradient(135deg, #fed7d7, #feb2b2);
            color: #c53030;
            animation: badgePulse 1.5s infinite;
        }
        
        .normal-badge {
            background: linear-gradient(135deg, #bee3f8, #90cdf4);
            color: #2b6cb0;
        }
        
        .low-badge {
            background: linear-gradient(135deg, #c6f6d5, #9ae6b4);
            color: #276749;
        }
        
        .badge-count {
            font-size: 0.8em;
            font-weight: 700;
        }
        
        @keyframes badgePulse {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
            }
        }
        
        .todo-actions {
            display: flex;
            gap: 15px;
            justify-content: center;
            flex-wrap: wrap;
        }
        
        .todo-action-btn {
            background: linear-gradient(135deg, #667eea, #764ba2);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 25px;
            font-size: 0.9em;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
            box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
        }
        
        .todo-action-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
        }
        
        .todo-action-btn:active {
            transform: translateY(0);
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .carousel-content h2 {
                font-size: 2em;
            }

            .carousel-content p {
                font-size: 1em;
            }

            .carousel-content {
                padding: 0 20px;
            }

            .quick-links {
                grid-template-columns: 1fr;
            }

            .news-grid {
                grid-template-columns: 1fr;
            }

            .news-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 15px;
            }
        }
    /* 统计数据可视化样式 */
.stats-visualization {
    margin: 40px 0;
    padding: 0;
}

.chart-container {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.chart-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #667eea, #764ba2, #f093fb, #f5576c);
}

.chart-title {
    text-align: center;
    font-size: 1.5em;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.chart-title i {
    color: #667eea;
    font-size: 1.2em;
}

.main-chart {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
    position: relative;
}

.chart-center {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.center-stat {
    text-align: center;
}

.center-number {
    display: block;
    font-size: 2.5em;
    font-weight: 700;
    color: #667eea;
    line-height: 1;
}

.center-label {
    display: block;
    font-size: 0.9em;
    color: #64748b;
    margin-top: 5px;
    font-weight: 500;
}

.progress-ring {
    transform: rotate(-90deg);
    filter: drop-shadow(0 4px 8px rgba(102, 126, 234, 0.3));
}

.progress-ring-fill {
    transition: stroke-dashoffset 2s ease-in-out;
    animation: progressAnimation 2s ease-in-out;
}

@keyframes progressAnimation {
    from {
        stroke-dashoffset: 502.4;
    }
    to {
        stroke-dashoffset: 215;
    }
}

.stats-grid-visual {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 25px;
}

.stat-card-visual {
    background: white;
    border-radius: 15px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border-left: 4px solid;
    position: relative;
    overflow: hidden;
}

.stat-card-visual::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    opacity: 0.1;
    border-radius: 50%;
    transform: translate(20px, -20px);
}

.stat-card-visual.primary {
    border-left-color: #667eea;
}

.stat-card-visual.primary::before {
    background: #667eea;
}

.stat-card-visual.success {
    border-left-color: #48bb78;
}

.stat-card-visual.success::before {
    background: #48bb78;
}

.stat-card-visual.warning {
    border-left-color: #ed8936;
}

.stat-card-visual.warning::before {
    background: #ed8936;
}

.stat-card-visual.info {
    border-left-color: #4299e1;
}

.stat-card-visual.info::before {
    background: #4299e1;
}

.stat-card-visual.gradient {
    border-left-color: #f093fb;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
}

.stat-card-visual.accent {
    border-left-color: #38b2ac;
    background: linear-gradient(135deg, #38b2ac 0%, #319795 100%);
    color: white;
}

.stat-card-visual:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.stat-icon-visual {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    color: white;
    flex-shrink: 0;
}

.stat-card-visual.primary .stat-icon-visual {
    background: linear-gradient(135deg, #667eea, #764ba2);
}

.stat-card-visual.success .stat-icon-visual {
    background: linear-gradient(135deg, #48bb78, #38a169);
}

.stat-card-visual.warning .stat-icon-visual {
    background: linear-gradient(135deg, #ed8936, #dd6b20);
}

.stat-card-visual.info .stat-icon-visual {
    background: linear-gradient(135deg, #4299e1, #3182ce);
}

.stat-card-visual.gradient .stat-icon-visual,
.stat-card-visual.accent .stat-icon-visual {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
}

.stat-content {
    flex: 1;
}

.stat-number {
    font-size: 2em;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 5px;
}

.stat-label {
    font-size: 0.9em;
    opacity: 0.8;
    margin-bottom: 10px;
    font-weight: 500;
}

.stat-bar {
    height: 4px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    overflow: hidden;
}

.stat-card-visual.gradient .stat-bar,
.stat-card-visual.accent .stat-bar {
    background: rgba(255, 255, 255, 0.3);
}

.stat-progress {
    height: 100%;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 2px;
    transition: width 2s ease-in-out;
    animation: progressBarAnimation 2s ease-in-out;
}

.stat-card-visual.gradient .stat-progress,
.stat-card-visual.accent .stat-progress {
    background: rgba(255, 255, 255, 0.8);
}

@keyframes progressBarAnimation {
    from {
        width: 0;
    }
}

.trend-indicators {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
}

.trend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(72, 187, 120, 0.1);
    border-radius: 25px;
    font-size: 0.9em;
    font-weight: 500;
    color: #2d3748;
}

.trend-up {
    color: #48bb78;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-3px);
    }
    60% {
        transform: translateY(-2px);
    }
}

/* 响应式设计 */
@media (max-width: 768px) {
    .chart-container {
        padding: 20px;
    }
    
    .stats-grid-visual {
        grid-template-columns: 1fr;
    }
    
    .main-chart {
        margin-bottom: 20px;
    }
    
    .progress-ring {
        width: 150px;
        height: 150px;
    }
    
    .center-number {
        font-size: 2em;
    }
    
    .trend-indicators {
        flex-direction: column;
        align-items: center;
    }
}
</style>
</head>
<body>
    <!-- 侧边栏 -->
    <div class="sidebar" id="sidebar">
        <div class="sidebar-header">
            <h3>排球队管理系统</h3>
            <button class="sidebar-toggle" onclick="toggleSidebar()">
                <i class="fas fa-times"></i>
            </button>
        </div>
        <nav class="sidebar-nav">
            <ul>
                <li class="active">
                    <a href="#" onclick="showPage('home')">
                        <i class="fas fa-home"></i>
                        首页
                    </a>
                </li>
                <li>
                    <a href="#" onclick="showPage('about')">
                        <i class="fas fa-info-circle"></i>
                        球队介绍
                    </a>
                </li>
                <li>
                    <a href="#" onclick="showPage('players')">
                        <i class="fas fa-users"></i>
                        队员信息
                    </a>
                </li>
                <li>
                    <a href="#" onclick="showPage('matches')">
                        <i class="fas fa-trophy"></i>
                        比赛管理
                    </a>
                </li>
                <li>
                    <a href="#" onclick="showPage('training')">
                        <i class="fas fa-dumbbell"></i>
                        训练安排
                    </a>
                </li>
                <li>
                    <a href="#" onclick="showPage('knowledge')">
                        <i class="fas fa-book"></i>
                        排球知识
                    </a>
                </li>
                <li>
                    <a href="#" onclick="showPage('notifications')">
                        <i class="fas fa-bell"></i>
                        通知管理
                    </a>
                </li>
                <li>
                    <a href="#" onclick="showPage('settings')">
                        <i class="fas fa-cog"></i>
                        系统设置
                    </a>
                </li>
            </ul>
        </nav>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
        <!-- 顶部导航栏 -->
        <div class="topbar">
            <div class="topbar-left">
                <button class="menu-toggle" onclick="toggleSidebar()">
                    <i class="fas fa-bars"></i>
                </button>
                <h1>排球队管理系统</h1>
            </div>
            <div class="switch-page">
                <button class="btn btn-secondary" onclick="switchToMainPage()">
                    <i class="fas fa-exchange-alt"></i> 流光小队
                </button>
            </div>
            <script>
                function switchToMainPage() {
                    window.location.href = 'index.html';
                }
            // 数据可视化动画初始化
document.addEventListener('DOMContentLoaded', function() {
    // 延迟启动动画，让用户看到效果
    setTimeout(() => {
        const progressBars = document.querySelectorAll('.stat-progress');
        progressBars.forEach(bar => {
            const width = bar.style.width;
            bar.style.width = '0';
            setTimeout(() => {
                bar.style.width = width;
            }, 100);
        });
    }, 500);
    
    // 数字递增动画
    const numbers = document.querySelectorAll('.stat-number');
    numbers.forEach(number => {
        const target = parseInt(number.textContent.replace('%', '').replace(',', ''));
        const isPercentage = number.textContent.includes('%');
        const hasComma = number.textContent.includes(',');
        
        let current = 0;
        const increment = target / 50;
        const timer = setInterval(() => {
            current += increment;
            if (current >= target) {
                current = target;
                clearInterval(timer);
            }
            
            let displayValue = Math.floor(current);
            if (hasComma && displayValue >= 1000) {
                displayValue = displayValue.toLocaleString();
            }
            if (isPercentage) {
                displayValue += '%';
            }
            
            number.textContent = displayValue;
        }, 40);
    });
});
</script>
        </div>

        <!-- 内容区域 -->
        <div class="content">
            <!-- 首页内容 -->
            <div id="home-page" class="page active">
                <div class="page-header">
                    <h2>欢迎来到信工排球队</h2>
                    <div class="btn btn-primary">
                        <i class="fas fa-plus"></i>
                        快速操作
                    </div>
                </div>

                <!-- 轮播图 -->
                <div class="carousel-container">
                    <div class="carousel-slides" id="carouselSlides">
                        <div class="carousel-slide">
                            <div class="carousel-content">
                                <h2>团结协作，追求卓越</h2>
                                <p>我们的排球队致力于培养优秀的排球运动员，通过专业的训练和团队合作，在赛场上展现出色的表现</p>
                            </div>
                        </div>
                        <div class="carousel-slide">
                            <div class="carousel-content">
                                <h2>专业训练体系</h2>
                                <p>拥有完整的训练体系，包括技术训练、体能训练、战术训练等，全面提升队员的综合能力</p>
                            </div>
                        </div>
                        <div class="carousel-slide">
                            <div class="carousel-content">
                                <h2>丰富比赛经验</h2>
                                <p>参加各级各类比赛，积累丰富的比赛经验，在实战中提升技术水平和心理素质</p>
                            </div>
                        </div>
                        <div class="carousel-slide">
                            <div class="carousel-content">
                                <h2>优秀教练团队</h2>
                                <p>拥有经验丰富的教练团队，为每位队员提供个性化的指导和训练方案</p>
                            </div>
                        </div>
                        <div class="carousel-slide">
                            <div class="carousel-content">
                                <h2>团队精神培养</h2>
                                <p>注重团队精神的培养，让每位队员在团队中找到自己的位置，发挥最大的价值</p>
                            </div>
                        </div>
                    </div>
                    <button class="carousel-arrow prev" onclick="previousSlide()">
                        <i class="fas fa-chevron-left"></i>
                    </button>
                    <button class="carousel-arrow next" onclick="nextSlide()">
                        <i class="fas fa-chevron-right"></i>
                    </button>
                    <div class="carousel-nav" id="carouselNav">
                        <div class="carousel-dot active" onclick="currentSlide(1)"></div>
                        <div class="carousel-dot" onclick="currentSlide(2)"></div>
                        <div class="carousel-dot" onclick="currentSlide(3)"></div>
                        <div class="carousel-dot" onclick="currentSlide(4)"></div>
                        <div class="carousel-dot" onclick="currentSlide(5)"></div>
                    </div>
                </div>

                <!-- 统计数据可视化图表 -->
                <div class="stats-visualization">
                    <div class="chart-container">
                        <h3 class="chart-title">
                            <i class="fas fa-chart-pie"></i>
                            排球队数据统计总览
                        </h3>
                        
                        <!-- 主要统计环形图 -->
                        <div class="main-chart">
                            <div class="chart-center">
                                <div class="center-stat">
                                    <span class="center-number">57%</span>
                                    <span class="center-label">总胜率</span>
                                </div>
                            </div>
                            
                            <!-- 环形进度条 -->
                            <svg class="progress-ring" width="200" height="200">
                                <circle class="progress-ring-bg" cx="100" cy="100" r="80" fill="none" stroke="#e2e8f0" stroke-width="12"/>
                                <circle class="progress-ring-fill" cx="100" cy="100" r="80" fill="none" stroke="#667eea" stroke-width="12" 
                                        stroke-dasharray="502.4" stroke-dashoffset="215" stroke-linecap="round"/>
                            </svg>
                        </div>
                        
                        <!-- 详细数据卡片网格 -->
                        <div class="stats-grid-visual">
                            <div class="stat-card-visual primary">
                                <div class="stat-icon-visual">
                                    <i class="fas fa-users"></i>
                                </div>
                                <div class="stat-content">
                                    <div class="stat-number">25</div>
                                    <div class="stat-label">现役队员</div>
                                    <div class="stat-bar">
                                        <div class="stat-progress" style="width: 83%"></div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="stat-card-visual success">
                                <div class="stat-icon-visual">
                                    <i class="fas fa-trophy"></i>
                                </div>
                                <div class="stat-content">
                                    <div class="stat-number">156</div>
                                    <div class="stat-label">比赛场次</div>
                                    <div class="stat-bar">
                                        <div class="stat-progress" style="width: 100%"></div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="stat-card-visual warning">
                                <div class="stat-icon-visual">
                                    <i class="fas fa-medal"></i>
                                </div>
                                <div class="stat-content">
                                    <div class="stat-number">89</div>
                                    <div class="stat-label">胜利场次</div>
                                    <div class="stat-bar">
                                        <div class="stat-progress" style="width: 57%"></div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="stat-card-visual info">
                                <div class="stat-icon-visual">
                                    <i class="fas fa-award"></i>
                                </div>
                                <div class="stat-content">
                                    <div class="stat-number">15</div>
                                    <div class="stat-label">获得奖项</div>
                                    <div class="stat-bar">
                                        <div class="stat-progress" style="width: 75%"></div>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- 新增的重要数据 -->
                            <div class="stat-card-visual gradient">
                                <div class="stat-icon-visual">
                                    <i class="fas fa-percentage"></i>
                                </div>
                                <div class="stat-content">
                                    <div class="stat-number">57%</div>
                                    <div class="stat-label">总胜率</div>
                                    <div class="stat-bar">
                                        <div class="stat-progress" style="width: 57%"></div>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="stat-card-visual accent">
                                <div class="stat-icon-visual">
                                    <i class="fas fa-clock"></i>
                                </div>
                                <div class="stat-content">
                                    <div class="stat-number">1,200</div>
                                    <div class="stat-label">训练时长(小时)</div>
                                    <div class="stat-bar">
                                        <div class="stat-progress" style="width: 90%"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 数据趋势指示器 -->
                        <div class="trend-indicators">
                            <div class="trend-item">
                                <i class="fas fa-arrow-up trend-up"></i>
                                <span>胜率较上季度提升 8%</span>
                            </div>
                            <div class="trend-item">
                                <i class="fas fa-arrow-up trend-up"></i>
                                <span>队员数量增长 25%</span>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 快速链接 -->
                <div class="quick-links">
                    <a href="pages_paiqiu/personalized/index.html" class="quick-link-card">
                        <div class="quick-link-icon">🎯</div>
                        <h3 class="quick-link-title">个性化推荐与快捷入口结合</h3>
                        <p class="quick-link-description">从基础排球推荐，展示历史明星球员有关的排球员，并上传或许评论排球赛事相关图片，点击即可进入队员页面查看详细信息。</p>
                    </a>
                    
                    <a href="pages_paiqiu/interactive/index.html" class="quick-link-card">
                        <div class="quick-link-icon">🎮</div>
                        <h3 class="quick-link-title">动态与互动区域</h3>
                        <p class="quick-link-description">训练动态分享：教练或队员发布训练相关的动态内容，更新动态，其他队员点赞、评论、增强团队凝聚力。</p>
                    </a>
                    
                    <a href="pages_paiqiu/cooperation/index.html" class="quick-link-card">
                        <div class="quick-link-icon">🤝</div>
                        <h3 class="quick-link-title">合作与交流板块</h3>
                        <p class="quick-link-description">友好队伍链接：展示与本队友好合作的友好队友好队，提供链接到其他队伍的官方网站，促进队伍间的友好交流。</p>
                    </a>
                    
                    <a href="pages_paiqiu/interactive/training.html" class="quick-link-card">
                        <div class="quick-link-icon">🏃</div>
                        <h3 class="quick-link-title">训练互动体验</h3>
                        <p class="quick-link-description">每日训练签到：队员可以发布训练相关的动态内容，更新动态，其他队员点赞、评论、增强团队凝聚力。</p>
                    </a>
                    
                    <a href="pages_paiqiu/interactive/forum.html" class="quick-link-card">
                        <div class="quick-link-icon">💬</div>
                        <h3 class="quick-link-title">排球论坛互动</h3>
                        <p class="quick-link-description">每日签到有奖励：用户可以发布训练相关的动态内容，更新动态，其他队员点赞、评论、增强团队凝聚力。</p>
                    </a>
                    
                    <a href="pages_paiqiu/cooperation/external.html" class="quick-link-card">
                        <div class="quick-link-icon">🌐</div>
                        <h3 class="quick-link-title">外部合作交流</h3>
                        <p class="quick-link-description">友好队伍链接：展示与本队友好合作的友好队友好队，提供链接到其他队伍的官方网站，促进队伍间的友好交流。</p>
                    </a>
                </div>

                <!-- 最新动态 -->
                <div class="news-section">
                    <div class="news-header">
                        <h3>
                            <i class="fas fa-newspaper"></i>
                            最新动态
                        </h3>
                        <a href="#" class="btn btn-secondary btn-sm" onclick="showPage('news')">
                            查看更多
                        </a>
                    </div>
                    <div class="news-grid" id="newsGrid">
                        <!-- 新闻卡片将通过JavaScript动态生成 -->
                    </div>
                </div>

                <!-- 待办事项 -->
                <div class="todo-section">
                    <div class="todo-header">
                        <h3>
                            <i class="fas fa-tasks"></i>
                            待办事项
                        </h3>
                        <div class="todo-stats">
                            <span class="todo-count" id="todoCount">5</span>
                            <span class="todo-label">项待处理</span>
                        </div>
                    </div>
                    
                    <div class="todo-container">
                        <!-- 待办事项卡片 -->
                        <div class="todo-card urgent" onclick="handleTodoClick('approval1')">
                            <div class="todo-icon">
                                <i class="fas fa-user-check"></i>
                            </div>
                            <div class="todo-content">
                                <div class="todo-title">队员入队申请审批</div>
                                <div class="todo-desc">张三的入队申请等待审批</div>
                                <div class="todo-time">2小时前</div>
                            </div>
                            <div class="todo-badge urgent-badge">
                                <i class="fas fa-exclamation"></i>
                            </div>
                        </div>
                        
                        <div class="todo-card normal" onclick="handleTodoClick('message1')">
                            <div class="todo-icon">
                                <i class="fas fa-envelope"></i>
                            </div>
                            <div class="todo-content">
                                <div class="todo-title">新消息通知</div>
                                <div class="todo-desc">教练发布了新的训练计划</div>
                                <div class="todo-time">5小时前</div>
                            </div>
                            <div class="todo-badge normal-badge">
                                <span class="badge-count">3</span>
                            </div>
                        </div>
                        
                        <div class="todo-card normal" onclick="handleTodoClick('schedule1')">
                            <div class="todo-icon">
                                <i class="fas fa-calendar-alt"></i>
                            </div>
                            <div class="todo-content">
                                <div class="todo-title">比赛安排确认</div>
                                <div class="todo-desc">下周友谊赛时间需要确认</div>
                                <div class="todo-time">1天前</div>
                            </div>
                            <div class="todo-badge normal-badge">
                                <i class="fas fa-clock"></i>
                            </div>
                        </div>
                        
                        <div class="todo-card low" onclick="handleTodoClick('equipment1')">
                            <div class="todo-icon">
                                <i class="fas fa-volleyball-ball"></i>
                            </div>
                            <div class="todo-content">
                                <div class="todo-title">装备采购申请</div>
                                <div class="todo-desc">新排球和护具采购申请</div>
                                <div class="todo-time">3天前</div>
                            </div>
                            <div class="todo-badge low-badge">
                                <i class="fas fa-info"></i>
                            </div>
                        </div>
                        
                        <div class="todo-card normal" onclick="handleTodoClick('report1')">
                            <div class="todo-icon">
                                <i class="fas fa-chart-line"></i>
                            </div>
                            <div class="todo-content">
                                <div class="todo-title">月度报告审核</div>
                                <div class="todo-desc">12月份训练总结报告</div>
                                <div class="todo-time">1周前</div>
                            </div>
                            <div class="todo-badge normal-badge">
                                <i class="fas fa-file-alt"></i>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 快速操作按钮 -->
                    <div class="todo-actions">
                        <button class="todo-action-btn" onclick="markAllAsRead()">
                            <i class="fas fa-check-double"></i>
                            全部标记已读
                        </button>
                        <button class="todo-action-btn" onclick="showAllTodos()">
                            <i class="fas fa-list"></i>
                            查看全部
                        </button>
                    </div>
                </div>

                <!-- 系统公告栏 -->
                <div class="system-announcement">
                    <div class="announcement-container">
                        <div class="announcement-header">
                            <i class="fas fa-bullhorn"></i>
                            <span>系统公告</span>
                        </div>
                        <div class="announcement-content">
                            <div class="announcement-scroll" id="announcementScroll">
                                <div class="announcement-item">
                                    <span class="announcement-date">[2024-01-20]</span>
                                    <span class="announcement-text">系统将于本周末进行维护升级，届时可能会有短暂的服务中断，请提前做好准备。</span>
                                </div>
                                <div class="announcement-item">
                                    <span class="announcement-date">[2024-01-18]</span>
                                    <span class="announcement-text">新增队员管理功能，支持批量导入队员信息，提升管理效率。</span>
                                </div>
                                <div class="announcement-item">
                                    <span class="announcement-date">[2024-01-15]</span>
                                    <span class="announcement-text">比赛管理模块优化完成，新增比赛统计和数据分析功能。</span>
                                </div>
                                <div class="announcement-item">
                                    <span class="announcement-date">[2024-01-12]</span>
                                    <span class="announcement-text">欢迎使用排球队管理系统！如有问题请联系技术支持。</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 页脚 -->
                <footer class="main-footer">
                    <div class="footer-content">
                        <div class="footer-section">
                            <h4>关于我们</h4>
                            <p>专业的排球队管理系统，致力于为排球队提供全面的管理解决方案。</p>
                        </div>
                        <div class="footer-section">
                            <h4>联系方式</h4>
                            <p><i class="fas fa-envelope"></i> support@volleyball.com</p>
                            <p><i class="fas fa-phone"></i> 400-123-4567</p>
                        </div>
                        <div class="footer-section">
                            <h4>技术支持</h4>
                            <p>系统版本：v2.1.0</p>
                            <p>最后更新：2024-01-20</p>
                        </div>
                    </div>
                    <div class="footer-bottom">
                        <p>&copy; 2024 排球队管理系统. 保留所有权利. | 技术支持：开发团队</p>
                    </div>
                </footer>
            </div>

            <!-- 其他页面内容将通过JavaScript动态加载 -->
            <div id="page-content"></div>
        </div>
    </div>

    <!-- JavaScript -->
    <script src="js/config.js"></script>
    <script src="js/api.js"></script>
    <script>
        // 轮播图功能
        let currentSlideIndex = 0;
        const totalSlides = 5;

        function showSlide(index) {
            const slides = document.getElementById('carouselSlides');
            const dots = document.querySelectorAll('.carousel-dot');
            
            slides.style.transform = `translateX(-${index * 20}%)`;
            
            dots.forEach((dot, i) => {
                dot.classList.toggle('active', i === index);
            });
        }

        function nextSlide() {
            currentSlideIndex = (currentSlideIndex + 1) % totalSlides;
            showSlide(currentSlideIndex);
        }

        function previousSlide() {
            currentSlideIndex = (currentSlideIndex - 1 + totalSlides) % totalSlides;
            showSlide(currentSlideIndex);
        }

        function currentSlide(index) {
            currentSlideIndex = index - 1;
            showSlide(currentSlideIndex);
        }

        // 自动轮播
        setInterval(nextSlide, 5000);

        // 侧边栏切换
        function toggleSidebar() {
            const sidebar = document.getElementById('sidebar');
            const isMobile = window.innerWidth <= 768;
            
            if (isMobile) {
                // 移动端：切换侧边栏显示/隐藏
                sidebar.classList.toggle('open');
            } else {
                // 桌面端：侧边栏始终可见，不需要切换
                console.log('桌面端侧边栏始终可见');
            }
        }

        // 页面导航功能
        function showPage(pageName) {
            // 更新侧边栏活跃状态
            document.querySelectorAll('.sidebar-nav li').forEach(li => {
                li.classList.remove('active');
            });
            
            // 隐藏首页
            document.getElementById('home-page').classList.remove('active');
            
            if (pageName === 'home') {
                document.getElementById('home-page').classList.add('active');
                document.querySelector('.sidebar-nav li:first-child').classList.add('active');
                return;
            }
            
            // 为导航项添加活跃状态
            const navLinks = document.querySelectorAll('.sidebar-nav a');
            navLinks.forEach(link => {
                if (link.getAttribute('onclick').includes(pageName)) {
                    link.parentElement.classList.add('active');
                }
            });
            
            // 根据页面名称跳转到对应页面
            navigateToPage(pageName);
        }

        // 页面跳转功能
        function navigateToPage(pageName) {
            const pageRoutes = {
                'about': 'pages_paiqiu/about/about.html',
                'players': 'pages_paiqiu/players/list.html',
                'matches': 'pages_paiqiu/matches/matches.html',
                'training': 'pages_paiqiu/training/training.html',
                'knowledge': 'pages_paiqiu/knowledge/index.html',
                'notifications': 'pages_paiqiu/notifications/detail.html',
                'settings': '#'
            };

            const targetPage = pageRoutes[pageName];
            if (targetPage && targetPage !== '#') {
                window.location.href = targetPage;
            } else {
                // 如果页面不存在，显示开发中页面
                const pageContent = document.getElementById('page-content');
                pageContent.innerHTML = `
                    <div class="page">
                        <div class="page-header">
                            <h2>${getPageTitle(pageName)}</h2>
                        </div>
                        <div class="empty-state">
                            <i class="fas fa-file-alt"></i>
                            <h4>页面正在开发中</h4>
                            <p>该页面内容正在开发中，敬请期待...</p>
                        </div>
                    </div>
                `;
                pageContent.style.display = 'block';
            }
        }

        // 获取页面标题
        function getPageTitle(pageName) {
            const titles = {
                'about': '球队介绍',
                'players': '队员信息', 
                'matches': '比赛管理',
                'training': '训练安排',
                'knowledge': '排球知识',
                'notifications': '通知管理',
                'settings': '系统设置'
            };
            return titles[pageName] || '页面';
        }

        // 初始化新闻数据
        function initNewsData() {
            const newsData = [
                {
                    title: '2024年春季联赛即将开始',
                    category: '比赛通知',
                    date: '2024-01-20',
                    excerpt: '2024年春季排球联赛将于下月开始，我们球队已经做好充分准备，期待在比赛中取得好成绩...'
                },
                {
                    title: '新队员加入球队',
                    category: '球队动态',
                    date: '2024-01-18',
                    excerpt: '欢迎新队员张三加入我们的排球队，他将在主攻位置为球队贡献力量，期待他的精彩表现...'
                },
                {
                    title: '友谊赛胜利',
                    category: '比赛结果',
                    date: '2024-01-15',
                    excerpt: '在昨天的友谊赛中，我们以3:1的比分战胜了对手，展现了良好的团队精神和技术水平...'
                },
                {
                    title: '训练计划更新',
                    category: '训练安排',
                    date: '2024-01-12',
                    excerpt: '本周训练计划已更新，将重点提升队员的扣球技术和团队配合能力，请所有队员准时参加...'
                },
                {
                    title: '排球知识讲座',
                    category: '学习活动',
                    date: '2024-01-10',
                    excerpt: '本周六将举办排球知识讲座，邀请专业教练讲解排球战术和规则，欢迎所有队员参加...'
                },
                {
                    title: '球队装备更新',
                    category: '装备管理',
                    date: '2024-01-08',
                    excerpt: '球队新装备已到位，包括专业排球、护具等，将提升训练和比赛的质量...'
                }
            ];

            const newsGrid = document.getElementById('newsGrid');
            newsGrid.innerHTML = newsData.map(news => `
                <div class="news-card" onclick="showNewsDetail('${news.title}')">
                    <div class="news-card-image">
                        <i class="fas fa-newspaper"></i>
                    </div>
                    <div class="news-card-content">
                        <div class="news-meta">
                            <span class="news-category">${news.category}</span>
                            <span class="news-date">${news.date}</span>
                        </div>
                        <h4 class="news-title">${news.title}</h4>
                        <p class="news-excerpt">${news.excerpt}</p>
                    </div>
                </div>
            `).join('');
        }

        // 显示新闻详情
        function showNewsDetail(title) {
            alert('新闻详情功能正在开发中：' + title);
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            initNewsData();
            
            // 可以在这里加载统计数据
            // loadStatistics();
        });

        // 窗口大小改变时处理侧边栏状态
        window.addEventListener('resize', function() {
            const sidebar = document.getElementById('sidebar');
            const isMobile = window.innerWidth <= 768;
        
        if (!isMobile) {
            // 桌面端：确保侧边栏可见
            sidebar.classList.remove('open');
        }
    });
</script>

</body>
</html>

    <style>
        /* 系统公告栏样式 */
        .system-announcement {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 20px;
            margin: 40px 0 20px 0;
            position: relative;
            overflow: hidden;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            border-radius: 12px;
        }

        .announcement-container {
            max-width: 100%;
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
            gap: 25px;
        }

        .announcement-header {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: bold;
            font-size: 1.2em;
            white-space: nowrap;
            min-width: 120px;
        }

        .announcement-header i {
            font-size: 1.3em;
            animation: pulse 2s infinite;
            color: #ffd700;
        }

        .announcement-content {
            flex: 1;
            overflow: hidden;
            position: relative;
            height: 30px;
            display: flex;
            align-items: center;
        }

        .announcement-scroll {
            display: flex;
            animation: scroll-left 80s linear infinite;
            gap: 80px;
            align-items: center;
        }

        .announcement-item {
            white-space: nowrap;
            display: flex;
            align-items: center;
            gap: 15px;
            font-size: 1em;
        }

        .announcement-date {
            color: #ffd700;
            font-weight: bold;
            font-size: 0.95em;
            background: rgba(255, 215, 0, 0.2);
            padding: 2px 8px;
            border-radius: 12px;
        }

        .announcement-text {
            font-size: 1em;
            line-height: 1.4;
            color: #ffffff;
        }

        /* 主页脚样式优化 */
        .main-footer {
            background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
            color: #e2e8f0;
            margin-top: 20px;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            border-radius: 12px 12px 0 0;
        }

        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
            padding: 50px 20px 30px;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 40px;
        }

        .footer-section {
            padding: 20px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 12px;
            border-left: 4px solid #667eea;
        }

        .footer-section h4 {
            color: #667eea;
            margin-bottom: 20px;
            font-size: 1.2em;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .footer-section h4::before {
            content: "";
            width: 4px;
            height: 20px;
            background: #667eea;
            border-radius: 2px;
        }

        .footer-section p {
            margin-bottom: 12px;
            line-height: 1.8;
            color: #cbd5e0;
            font-size: 0.95em;
        }

        .footer-section i {
            margin-right: 10px;
            color: #667eea;
            width: 16px;
            text-align: center;
        }

        .footer-bottom {
            border-top: 1px solid #4a5568;
            padding: 25px 20px;
            text-align: center;
            color: #a0aec0;
            font-size: 0.9em;
            background: rgba(0, 0, 0, 0.2);
        }

        /* 动画效果优化 */
        @keyframes scroll-left {
            0% {
                transform: translateX(100%);
            }
            100% {
                transform: translateX(-100%);
            }
        }

        @keyframes pulse {
            0%, 100% {
                opacity: 1;
                transform: scale(1);
            }
            50% {
                opacity: 0.8;
                transform: scale(1.1);
            }
        }

        /* 响应式设计优化 */
        @media (max-width: 768px) {
            .system-announcement {
                padding: 15px 0;
            }

            .announcement-container {
                flex-direction: column;
                gap: 15px;
                text-align: center;
            }

            .announcement-header {
                justify-content: center;
                font-size: 1.1em;
                min-width: auto;
            }

            .announcement-content {
                height: 25px;
            }

            .announcement-item {
                font-size: 0.9em;
                gap: 10px;
            }

            .footer-content {
                grid-template-columns: 1fr;
                text-align: center;
                padding: 30px 20px 20px;
                gap: 25px;
            }

            .footer-section {
                padding: 15px;
            }

            .announcement-scroll {
                animation-duration: 50s;
                gap: 60px;
            }
        }

        /* 鼠标悬停效果优化 */
        .system-announcement:hover .announcement-scroll {
            animation-play-state: paused;
        }

        .system-announcement:hover {
            background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
        }

        .footer-section:hover {
            background: rgba(255, 255, 255, 0.08);
            transform: translateY(-2px);
            transition: all 0.3s ease;
        }
    </style>

    <script>
        // 系统公告功能
        document.addEventListener('DOMContentLoaded', function() {
            // 可以通过API动态加载公告内容
            // loadSystemAnnouncements();
        });

        // 加载系统公告（示例函数）
        function loadSystemAnnouncements() {
            // 这里可以调用API获取最新的系统公告
            const announcements = [
                {
                    date: '2024-01-20',
                    text: '系统将于本周末进行维护升级，届时可能会有短暂的服务中断，请提前做好准备。'
                },
                {
                    date: '2024-01-18', 
                    text: '新增队员管理功能，支持批量导入队员信息，提升管理效率。'
                }
                // 更多公告...
            ];
            
            const scrollContainer = document.getElementById('announcementScroll');
            scrollContainer.innerHTML = announcements.map(item => `
                <div class="announcement-item">
                    <span class="announcement-date">[${item.date}]</span>
                    <span class="announcement-text">${item.text}</span>
                </div>
            `).join('');
        }
            // 待办事项交互功能
        function handleTodoClick(todoId) {
            // 这里可以根据todoId处理不同的待办事项
            console.log('处理待办事项:', todoId);
            
            // 模拟处理效果
            const todoCards = document.querySelectorAll('.todo-card');
            todoCards.forEach(card => {
                if (card.onclick.toString().includes(todoId)) {
                    card.style.opacity = '0.6';
                    card.style.transform = 'scale(0.98)';
                    
                    setTimeout(() => {
                        card.style.opacity = '1';
                        card.style.transform = 'scale(1)';
                        showToast('待办事项已处理');
                    }, 300);
                }
            });
        }
        
        function markAllAsRead() {
            const todoCards = document.querySelectorAll('.todo-card');
            todoCards.forEach((card, index) => {
                setTimeout(() => {
                    card.style.opacity = '0.6';
                    card.style.transform = 'scale(0.98)';
                    
                    setTimeout(() => {
                        card.style.opacity = '1';
                        card.style.transform = 'scale(1)';
                    }, 200);
                }, index * 100);
            });
            
            setTimeout(() => {
                document.getElementById('todoCount').textContent = '0';
                showToast('所有待办事项已标记为已读');
            }, todoCards.length * 100 + 200);
        }
        
        function showAllTodos() {
            showToast('跳转到待办事项管理页面');
            // 这里可以跳转到详细的待办事项页面
        }
        
        function showToast(message) {
            // 创建简单的提示框
            const toast = document.createElement('div');
            toast.textContent = message;
            toast.style.cssText = `
                position: fixed;
                top: 20px;
                right: 20px;
                background: linear-gradient(135deg, #667eea, #764ba2);
                color: white;
                padding: 12px 20px;
                border-radius: 8px;
                font-size: 0.9em;
                font-weight: 500;
                z-index: 1000;
                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
                animation: slideInRight 0.3s ease;
            `;
            
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.style.animation = 'slideOutRight 0.3s ease';
                setTimeout(() => {
                    document.body.removeChild(toast);
                }, 300);
            }, 2000);
        }
        
        // 添加动画样式
        const style = document.createElement('style');
        style.textContent = `
            @keyframes slideInRight {
                from {
                    transform: translateX(100%);
                    opacity: 0;
                }
                to {
                    transform: translateX(0);
                    opacity: 1;
                }
            }
            
            @keyframes slideOutRight {
                from {
                    transform: translateX(0);
                    opacity: 1;
                }
                to {
                    transform: translateX(100%);
                    opacity: 0;
                }
            }
        `;
        document.head.appendChild(style);
    </script>
</body>
</html>